<template>
  <div>
    <el-card>
      <el-table :data="dataList" border >
        <el-table-column label="索引" type="index"></el-table-column>        
        <el-table-column label="用户名" prop="username"></el-table-column>
        <el-table-column label="电话" prop="tel"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="openDeviceList(scope.row)">用户设备</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination :total="total" :current-page="query.page" :page-size="query.pageSize" @current-change="changePage" ></el-pagination>
    </el-card>

    <el-dialog title="用户设备" :visible.sync="deviceVisible" width="80%">
      <deviceList :row="curRow" />
    </el-dialog>
  </div>
</template>

<script>
  import {users} from "@/api/smog/index.js"
  import deviceList from "./components/deviceList.vue";
  
  export default {
    components:{
      deviceList
    },
    data(){
      return {
        query:{
          page:1,
          pageSize:10,
        },
        total:0,
        dataList:[],
        deviceVisible:false,
        curRow:{},
      }
    },
    created(){
      this.getData();
    },
    methods:{
      getData(){
        users(this.query).then(res=>{
          this.dataList = res.data.data;
          this.total = res.data.total;
          console.log(res,'user res');
        })
      },
      openDeviceList(row){
        this.curRow = row;
        this.deviceVisible = true;
      },
      changePage(page){
        this.query.page = page;
        this.getData();
      }
    }
  }
</script>

<style scoped>

</style>